<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/StaffTemplate.xhtml">

    <ui:define name="nav_menu">
        <p:menubar model="#{staffChangeInitialPasswordManagedBean.staffMenuModel}"/>
    </ui:define>
    <ui:define name="content">
        <h:Form>
            <h1>Review accumulation details</h1>
            <p:growl id="messages" />
            <p:fieldset style="width:950px">

                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>

                <h2>POINT ACCUMULATION DETAIL</h2>

                <h:panelGrid columns="2" border="1" columnClasses="column" cellpadding="5">

                    <h:outputText value="Customer name: " style="font-weight:bold; text-align:center; font-size:12px" />
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.tourist.tourist.firstName} #{tCubeULPManagerBean.selectedAccumulation.reservation.tourist.tourist.firstName}" />

                    <h:outputText value="Customer email address: " style="font-weight:bold; text-align:center; font-size:12px" />
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.tourist.tourist.email}" />

                    <h:outputText value="Reservation ID: " style="font-weight:bold; text-align:center; font-size:12px" />
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.id}" />

                    <h:outputText value="Reservation Date  " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservationDate}">
                        <f:convertDateTime dateStyle="full" pattern="EEE, dd/MM/yyyy" timeZone="EST" type="date" />
                    </h:outputText>

                    <h:outputText value="Reservation Time: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservationTime}">
                        <f:convertDateTime dateStyle="full" timeZone="EST" type="time" />
                    </h:outputText>

                    <h:outputText value="Number of people: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.numberOfPeople}"/>

                    <h:outputText value="Company name: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.stakeholder.corpName}"/>

                    <h:outputText value="Branch name: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.name}"/>

                    <h:outputText value="Total bill value: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.totalBill} SGD"/>

                    <h:outputText value="Total points received: " style="font-weight:bold; text-align:center; font-size:12px"/>
                    <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.totalPoint} points"/>
                </h:panelGrid>

                <br/> 
                <p:fieldset legend="Reservation's details" toggleable="true" toggleSpeed="500"
                            onToggleUpdate="growl" style="width:900px">

                    <p:dataTable var="reservationItem" value="#{tCubeULPManagerBean.selectedAccumulation.reservationComponent}" paginator="true" 
                                 rows="10" emptyMessage="No reservation item" selectionMode="single" dblClickSelect="true">
                        <p:column sortBy="#{reservationItem.id}" filterBy="#{reservationItem.id}">
                            <f:facet name="header">
                                <h:outputText value="ID" />
                            </f:facet>
                            <h:outputText value="#{reservationItem.id}" />
                        </p:column>

                        <p:column sortBy="#{tCubeULPManagerBean.getProductFromReservedFnBProduct(reservationItem).name}" filterBy="#{customerULPManagerBean.getProductFromReservedFnBProduct(reservationItem).name}">
                            <f:facet name="header">
                                <h:outputText value="Item name" />
                            </f:facet>
                            <h:outputText value="#{tCubeULPManagerBean.getProductFromReservedFnBProduct(reservationItem).name}" />
                        </p:column>


                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Image" />
                            </f:facet>
                            <p:graphicImage id="imageDisplay" value="/images/upload/media/#{tCubeULPManagerBean.getProductFromReservedFnBProduct(reservationItem).imageLink}"
                                            height="50" width="70"/> 
                        </p:column>  

                        <p:column sortBy="#{reservationItem.quantity}" filterBy="#{reservationItem.quantity}">
                            <f:facet name="header">
                                <h:outputText value="Quantity" />
                            </f:facet>
                            <h:outputText value="#{reservationItem.quantity}" />
                        </p:column>

                        <p:column sortBy="#{reservationItem.price*reservationItem.quantity}" filterBy="#{reservationItem.price*reservationItem.quantity}">
                            <f:facet name="header">
                                <h:outputText value="Total Price" />
                            </f:facet>
                            <h:outputText value="#{reservationItem.price*reservationItem.quantity} SGD" />
                        </p:column>

                        <p:column sortBy="#{reservationItem.pointReceived*reservationItem.quantity}" filterBy="#{reservationItem.pointReceived*reservationItem.quantity}">
                            <f:facet name="header">
                                <h:outputText value="Total Points Received" />
                            </f:facet>
                            <h:outputText value="#{reservationItem.pointReceived*reservationItem.quantity} points" />
                        </p:column>


                    </p:dataTable>

                </p:fieldset>
                <p:fieldset legend="Company's contact details" toggleable="true" toggleSpeed="500"
                            onToggleUpdate="growl" style="width:900px">
                    <h:panelGrid columns="2" columnClasses="column" cellpadding="5">
                        <h:outputText value="Company name: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.stakeholder.corpName}" />

                        <h:outputText value="Branch name: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.name}" />

                        <h:outputText value="Phone number: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.contactNumber}" />

                        <h:outputText value="Email address: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.stakeholder.corpEmail}" />

                        <h:outputText value="Office number: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.branchAddress.houseNumber}" />

                        <h:outputText value="Building name: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.branchAddress.buildingName}" />

                        <h:outputText value="Street name: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.branchAddress.streetName}" />

                        <h:outputText value="Postal code: " />
                        <h:outputText value="#{tCubeULPManagerBean.selectedAccumulation.reservation.branch.branchAddress.postalCode}" />

                    </h:panelGrid>
                </p:fieldset>
                <br/>
                <p:commandButton id="back" value="Back" ajax="true" action="staff/TCubeViewAccumulations?faces-redirect=true"/> 
            </p:fieldset>
        </h:form>
    </ui:define>
</ui:composition>
